<!-- 缓存菜单 -->
<template>
  <div class="flex items-center justify-between py-2px">
    <el-tabs
      class="tabs w-100%"
      type="border-card"
      v-model="activeTag"
      @tab-click="handleClick"
      @tab-remove="handleRemove"
      @click.right="showContextMenu($event)"
    >
      <el-tab-pane
        v-for="item in tagsStore.tags"
        :ref="(e)=>(tags[item.path] = e)"
        :key="item.path"
        :label="item.label"
        :name="item.path"
        :closable="item.name !== 'Admin'"
      />
    </el-tabs>
    <AppContextMenu
      v-model="menuShow"
      :menu="menus"
      :x="menu.x"
      :y="menu.y"
      @select="select"
    />
  </div>
</template>

<script setup>
import useTagsStore from '@/store/tags'

const route = useRoute()
const router = useRouter()
const tagsStore = useTagsStore()

// 选中数据
const { activeTag } = storeToRefs(tagsStore)
// const activeTag = ref('')
const tags = ref({})

// 添加/打开 标签
const addTags = () => {
  if (!tagsStore.breadcrumb.length) return
  const bread = tagsStore.breadcrumb[tagsStore.breadcrumb.length - 1]

  if (bread.type === 3) {
    activeTag.value = ''
    return
  }

  activeTag.value = route.fullPath
  if (tagsStore.tags.some(v => v.path === route.fullPath)) return
  tagsStore.tags.push({
    label: bread.name,
    path: route.fullPath,
    name: route.name
  })
}

const stop = watch(route, () => {
  if (!route.meta.requiresAuth) return
  addTags()
}, {
  immediate: true
})
onUnmounted(stop)

// 标签点击
const handleClick = (tab) => {
  router.push(tab.props.name)
}

// 标签关闭
const handleRemove = (path) => {
  let activeName = activeTag.value

  if (activeName === path) {
    tagsStore.tags.forEach((tag, index) => {
      if (tag.path === path) {
        const nextTab = tagsStore.tags[index + 1] || tagsStore.tags[index - 1]
        if (nextTab) {
          activeName = nextTab.path
        }
      }
    })
    router.push(activeName)
  }
  tagsStore.tags = tagsStore.tags.filter((tab) => tab.path !== path)
}

// 右键菜单
const menuShow = ref(false)
const menus = ref([
  {
    label: '刷新',
    icon: 'ep:refresh'
  },
  {
    label: '关闭其他',
    icon: 'ep:remove'
  },
  {
    label: '关闭所有',
    icon: 'ep:circle-close-filled'
  }
])
const menu = reactive({
  x: 0,
  y: 0
})

// 右键菜单选中的标签
let activeContexttTag = ''
const showContextMenu = (e) => {
  e.preventDefault()
  if (!e.srcElement.id) return

  activeContexttTag = e.srcElement.id.slice(4)

  menuShow.value = true
  menu.x = e.pageX
  menu.y = e.pageY
}

// 选中右键菜单
const select = (item) => {
  console.log(item)
  if (item.label === '刷新') {
    const active = {
      tag: tagsStore.tags.find(tag => tag.path === activeContexttTag),
      index: tagsStore.tags.findIndex(tag => tag.path === activeContexttTag)
    }

    tagsStore.tags = tagsStore.tags.filter(tag => tag.path !== activeContexttTag)
    activeTag.value = ''
    router.push(activeContexttTag)
    nextTick(() => {
      activeTag.value = active.tag.path
      tagsStore.tags.splice(active.index, 0, active.tag)
    })
  } else if (item.label === '关闭其他') {
    tagsStore.tags = tagsStore.tags.filter(tag => tag.path === activeContexttTag || tag.name === 'Admin')
    router.push(activeContexttTag)
  } else if (item.label === '关闭所有') {
    closeAll()
  }
}

// 关闭所有标签
const closeAll = () => {
  tagsStore.tags = tagsStore.tags.filter(tag => tag.name === 'Admin')
  activeTag.value = tagsStore.tags[0].path
  router.push(activeTag.value)
}

</script>

<style scoped lang='scss'>
.tabs {
  :deep(.el-tabs__content) {
    padding: 0;
  }
  :deep(.el-tabs__header) {
    margin: 0;
    border-bottom: none;
  }
}
</style>
